<template>
	<view class="details-Top">
		<image src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/ruzhitijian.png" mode="widthFix"></image>
		<view class="details-price">
			<text>¥600}</text>
			<text>已约200</text>
		</view>
		<text class="details-Title">入职体检套餐</text>
	</view>
	<!-- 预约时段 -->
	<view class="nucleic-time">
		<text class="nucleic-Title">体检时间选择</text>
		<scroll-view scroll-x="true" class="scroll-view_H">
			<view class="nucleic-time-flex">
				<view class="checkstyle" @click="changeTime()">
					<text>12-15</text>
					<text>星期五</text>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 适用人群 -->
	<view class="nucleic-time">
		<text class="nucleic-Title">适用人群</text>
		<view class="nucleic-crowd">
			<view>
				<image src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/nannvbuxian.webp"
					mode="aspectFill"></image>
				<text>男女不限</text>
			</view>
		</view>
	</view>
	<!-- 套餐项目 -->
	<view class="nucleic-time">
		<view class="nucleic-Title">套餐项目</view>
		<view class="project-view">
			<block>
				<text class="project-Title">医技检查</text>
				<view class="project-card">
					<view>胸部正片</view>
					<view>检查肺部，心脏</view>
				</view>
			</block>
		</view>
	</view>
	<!-- 提交 -->
	<view style="height:300rpx"></view>
	<view class="Total-view">
		<text>检测费用：¥600</text>
		<text @click="choicePatient">选择成员</text>
	</view>
	<!-- 弹窗选择成员 -->
	<!-- <seMember ref="choicePatient" /> -->
	<!-- <se-member></se-member> -->
	<!-- 骨架屏 -->
	<!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onLoad } from "@dcloudio/uni-app";
import { reactive, ref, toRefs } from 'vue'
// 引入弹窗组件
import seMember from '@/components/seMember.vue'

// 选择成员唤起子组件弹窗
function choicePatient() {

}


</script>
  
  
<style>
/* 表单提交 */
@import url('../../common-style/form.css');
/* 预约时间段 */
@import url('../../common-style/nucleic-time.css');

page {
	background-color: #fafafa;
}

/* 顶部 */
.details-Top {
	background-color: #ffffff;
}

.details-Top image {
	width: 100%;
	height: 400rpx;
	display: block;
}

.details-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}

.details-price text:nth-child(1) {
	font-size: 35rpx;
	font-weight: bold;
	color: #ff5f2c;
}

.details-Title {
	padding: 0 0 20rpx 20rpx;
	display: block;
	font-weight: bold;
	font-size: 35rpx;
}

/* 适用人群 */
.nucleic-crowd {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
}

.nucleic-crowd view {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nucleic-crowd image {
	width: 100rpx;
	height: 100rpx;
	display: block;
	margin-bottom: 10rpx;
	border-radius: 10rpx;
}

/* 套餐项目 */
.project-Title {
	background-color: #f0f2f8;
	display: block;
	border-radius: 10rpx;
	font-weight: bold;
	text-align: center;
	padding: 20rpx 0;
	margin: 20rpx 0;
}

.project-card {
	display: flex;
	flex-wrap: wrap;
}

.project-card view {
	margin: 5rpx;
	background-color: #f0f2f8;
	border-radius: 10rpx;
	padding: 20rpx 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project-card view:nth-child(1) {
	width: 200rpx;
	margin-left: auto;
}

.project-card view:nth-child(2) {
	flex: 1;
	margin-right: auto;
}

/* 选中加上样式 */
.checkstyle {
	background-color: #2c76ef !important;
	color: #ffffff !important;
}
</style>